<template>
  <div class="map">
    <div class="maxWidth">
      <div class="mapOut">
        <div id="container"></div>
        <div @click="lookInfo" class="infoBtn" v-show="infoListShow">
          &nbsp;&nbsp;&nbsp;&nbsp;巡检信息
        </div>
        <div @click="fullScreen" class="fullScreen">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全屏[X]
        </div>
        <div @click="playLine" class="playLine">
          &nbsp;&nbsp;{{ !playLineFlag ? "开始画线" : "停止" }}/\_
        </div>
        <div @click="clearOneLine" @dblclick="clearAllLine" class="clearLine">
          &nbsp;&nbsp;删除
        </div>
        <div v-show="!infoListShow" class="infoList">
          <div @click="closeInfoList" class="close">
            <span>巡检信息</span>
            <i class="el-icon-close"></i>
          </div>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
    </div>
    <div class="gisMapRight">
      <div class="topcards">
        <div class="cardItem">
          <span class="titlt">分区数量</span>
          <span class="num">7个</span>
        </div>
        <div class="cardItem">
          <span class="titlt">分区回收率</span>
          <span class="num">87%</span>
        </div>
        <div class="cardItem">
          <span class="titlt">资源调度</span>
          <span class="num">1087m³</span>
        </div>
      </div>
      <div class="cards6">
        <div class="charts" id="charts1"></div>
        <div class="charts" id="charts2"></div>
        <div class="charts" id="charts3"></div>
        <div class="charts" id="charts4"></div>
        <div class="charts" id="charts5"></div>
        <div class="charts" id="charts6"></div>
      </div>
    </div>
  </div>
</template>
  
<script>
import pianqu from "@/assets/json/pianqu.json";

export default {
  name: "Watermanage",
  data() {
    return {
      playLineFlag: false,
      playLinePlist: [],
      copyplayLinePlist: [],
      fillLayer: null,
      infoListShow: true,
      zoom: 0,
      mapDom: {},
      map: {},
      startWidth: 0,
      WidthMin: 0,
      WidthMax: 0,
      WidthEms:49.5,
      timer: null,
      isFull: false,
      xunjianList: [1, 2, 3, 4, 5],
      p2AddrssListColor: [
        {
          geometry: {
            type: "LineString",
            coordinates: [
              [108.895585, 34.194947],
              [108.902197, 34.202711],
              [108.934679, 34.210952],
              [108.952789, 34.194352],
              [108.982397, 34.193395],
              [109.010712, 34.203427],
              [108.994327, 34.222413],
              [108.970755, 34.224204],
            ],
          },
        },
      ],
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
            {
              label: "一级 2",
              children: [
                {
                  label: "二级 2-1",
                  children: [
                    {
                      label: "三级 2-1-1",
                    },
                  ],
                },
                {
                  label: "二级 2-2",
                  children: [
                    {
                      label: "三级 2-2-1",
                    },
                  ],
                },
              ],
            },
            {
              label: "一级 3",
              children: [
                {
                  label: "二级 3-1",
                  children: [
                    {
                      label: "三级 3-1-1",
                    },
                  ],
                },
                {
                  label: "二级 3-2",
                  children: [
                    {
                      label: "三级 3-2-1",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    // 全屏事件
    fullScreen() {
      let menu = document.querySelector(".map");
      let mapOut = document.querySelector(".mapOut");
      this.WidthMax = menu.offsetWidth;
      console.dir("最大", mapOut);
      if (!this.isFull) {
        this.mapDom = document.getElementById("container");
        this.startWidth = this.mapDom.offsetWidth;
        //清除定时器
        clearInterval(this.timer);
        // 不是全屏变全屏
        this.timer = setInterval(() => {
          this.addOrEditWid(mapOut, this.startWidth, this.WidthMax, 20);
          // console.log(1);
        }, 30);
        this.isFull = !this.isFull;
      } else {
        //清除定时器
        clearInterval(this.timer);
        // 全屏变半屏
        this.timer = setInterval(() => {
          this.addOrEditWid(mapOut, this.startWidth, this.WidthMax, -20);
          // console.log(1);
        }, 30);
        this.isFull = !this.isFull;
      }
    },
    addOrEditWid(dom, iWidthMin, iWidthMax, iSpeed) {
      dom.style.display = "block";
      if (iSpeed > 0) {
        // 变宽
        if (this.WidthEms < 100) {
          //dom.style.width = dom.offsetWidth + iSpeed + "px";

           this.WidthEms = this.WidthEms + 0.5;
           dom.style.width = this.WidthEms + "%" ;
           
        }
      } else {
        if (this.WidthEms > 49.5) {
          //dom.style.width = dom.offsetWidth + iSpeed + "px";
          this.WidthEms = this.WidthEms - 0.5;
          dom.style.width = this.WidthEms + "%" ;

        }
      }
    },
    // addOrEditWid(dom, iWidthMin, iWidthMax, iSpeed) {
    //   dom.style.display = "block";
    //   if (iSpeed > 0) {
    //     // 变宽
    //     if (dom.offsetWidth < iWidthMax) {
    //       dom.style.width = dom.offsetWidth + iSpeed + "px";
    //     }
    //   } else {
    //     if (dom.offsetWidth > iWidthMin) {
    //       dom.style.width = dom.offsetWidth + iSpeed + "px";
    //     }
    //   }
    // },
    // 查看巡检信息事件
    lookInfo() {
      this.infoListShow = false;
    },
    closeInfoList() {
      this.infoListShow = true;
    },
    // 图层相关
    addFillLayer() {
      fetch("yang/area/coordinate")
        .then((res) => {
          return res.json();
        })
        .then((testFillData) => {
          if (!this.fillLayer) {
            this.fillLayer = new BMapGL.FillLayer({
              crs: "GCJ02",
              enablePicked: true,
              autoSelect: true,
              pickWidth: 30,
              pickHeight: 30,
              selectedColor: "green", // 悬浮选中项颜色
              border: true,
              style: {
                fillColor: [
                  "case",
                  ["boolean", ["feature-state", "picked"], false],
                  "red",
                  [
                    "match",
                    ["get", "name"],
                    "海淀区",
                    "#ce4848",
                    "朝阳区",
                    "blue",
                    "通州区",
                    "blue",
                    "丰台区",
                    "#6704ff",
                    "房山区",
                    "#6704ff",
                    "orange",
                  ],
                ],
                fillOpacity: 0.3,
                strokeWeight: 1,
                strokeColor: "blue",
              },
            });
            this.fillLayer.addEventListener("click", function (e) {
              if (e.value.dataIndex !== -1 && e.value.dataItem) {
                console.log("click", e.value.dataItem);
                // 使用样式配置，实现单选或多选效果
                // this.updateState(e.value.dataIndex, { picked: true }, true);
              }
            });
          }
          console.log(testFillData);
          this.map.addNormalLayer(this.fillLayer);
          this.fillLayer.setData(testFillData.data);
        });
    },
    //  巡检点击事件
    handleNodeClick(data) {
      console.log(data);
    },
    // echarts表格处理
    getTable1() {
      let table1 = document.getElementById("charts1");
      let myChart = this.$echarts.init(table1);
      let option = {
        title: {
          text: "日流量时间记录",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日流量", "同比", "环比"],
          top: 13,
          right: 13,
          textStyle: {
            color: "#fff",
          },
          // padding:5
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载图标
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "3",
            "5",
            "7",
            "9",
            "11",
            "13",
            "15",
            "17",
            "19",
            "21",
            "23",
          ],
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        series: [
          {
            name: "日流量",
            type: "line",
            // stack: "Total",
            data: [1, 5, 2, 3, 5, 6, 8, 5, 6, 8, 3, 4],
          },
          {
            name: "同比",
            type: "line",
            // stack: "Total",
            data: [3, 5, 6, 8, 5, 6, 1, 5, 2, 3, 8, 3],
          },
          {
            name: "环比",
            type: "line",
            // stack: "Total",
            data: [8, 5, 6, 1, 5, 2, 3, 8, 3, 6, 1, 5],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable2() {
      let table1 = document.getElementById("charts2");
      let myChart = this.$echarts.init(table1);
      let option = {
        title: {
          text: "日流量时间记录",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日流量", "同比", "环比"],
          top: 13,
          right: 13,
          textStyle: {
            color: "#fff",
          },
          // padding:5
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载图标
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "3",
            "5",
            "7",
            "9",
            "11",
            "13",
            "15",
            "17",
            "19",
            "21",
            "23",
          ],
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        series: [
          {
            name: "日流量",
            type: "line",
            // stack: "Total",
            data: [1, 5, 2, 3, 5, 6, 8, 5, 6, 8, 3, 4],
          },
          {
            name: "同比",
            type: "line",
            // stack: "Total",
            data: [3, 5, 6, 8, 5, 6, 1, 5, 2, 3, 8, 3],
          },
          {
            name: "环比",
            type: "line",
            // stack: "Total",
            data: [8, 5, 6, 1, 5, 2, 3, 8, 3, 6, 1, 5],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable3() {
      let table1 = document.getElementById("charts3");
      let myChart = this.$echarts.init(table1);
      let option = {
        title: {
          text: "日流量时间记录",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日流量", "同比", "环比"],
          top: 13,
          right: 13,
          textStyle: {
            color: "#fff",
          },
          // padding:5
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载图标
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "3",
            "5",
            "7",
            "9",
            "11",
            "13",
            "15",
            "17",
            "19",
            "21",
            "23",
          ],
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        series: [
          {
            name: "日流量",
            type: "line",
            // stack: "Total",
            data: [1, 5, 2, 3, 5, 6, 8, 5, 6, 8, 3, 4],
          },
          {
            name: "同比",
            type: "line",
            // stack: "Total",
            data: [3, 5, 6, 8, 5, 6, 1, 5, 2, 3, 8, 3],
          },
          {
            name: "环比",
            type: "line",
            // stack: "Total",
            data: [8, 5, 6, 1, 5, 2, 3, 8, 3, 6, 1, 5],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable4() {
      let table1 = document.getElementById("charts4");
      let myChart = this.$echarts.init(table1);
      let option = {
        title: {
          text: "日流量时间记录",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日流量", "同比", "环比"],
          top: 13,
          right: 13,
          textStyle: {
            color: "#fff",
          },
          // padding:5
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载图标
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "3",
            "5",
            "7",
            "9",
            "11",
            "13",
            "15",
            "17",
            "19",
            "21",
            "23",
          ],
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标的字体颜色
            },
          },
        },
        series: [
          {
            name: "日流量",
            type: "line",
            // stack: "Total",
            data: [1, 5, 2, 3, 5, 6, 8, 5, 6, 8, 3, 4],
          },
          {
            name: "同比",
            type: "line",
            // stack: "Total",
            data: [3, 5, 6, 8, 5, 6, 1, 5, 2, 3, 8, 3],
          },
          {
            name: "环比",
            type: "line",
            // stack: "Total",
            data: [8, 5, 6, 1, 5, 2, 3, 8, 3, 6, 1, 5],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable5() {
      let table1 = document.getElementById("charts5");
      let myChart = this.$echarts.init(table1);
      let option = {
        color: ["#80FFA5"],
        title: {
          text: "时段用量统计",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["Line 1", "Line 2"],
          top:13,
          right:12,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标的字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标的字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: "Line 2",
            type: "line",
            // stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 0, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 255, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [240, 132, 201, 164, 110, 240, 150],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable6() {
      let charts6 = document.getElementById("charts6");
      let myChart = this.$echarts.init(charts6);
      let option = {
        title: {
          text: "分区流量统计",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // legend: {
        //   textStyle: {
        //     color: "#000",
        //     fontSize:16
        //   },
        // },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标的字体颜色
              },
            },
            
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标的字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [3, 2, 2, 1, 6, 4, 2],
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "#FF80B0",
                  },
                  {
                    offset: 1,
                    color: "#FFEE50",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getP2Line() {
      var view = new mapvgl.View({
        map: this.map,
      });
      var lineLayer = new mapvgl.LineRainbowLayer({
        style: "arrow", // road, arrow, normal
        width: 10,
        color: [
          "#00f",
          "#00f",
          "#0af",
          "#0a0",
          "#00f",
          "#00f",
          "#0af",
          "#0a0",
          "#00f",
          "#00f",
          "#0af",
          "#0a0",
        ],
      });

      lineLayer.setData(this.p2AddrssListColor);
      // var infoWindow = new BMapGL.InfoWindow(
      //   "地址：北京市东城区王府井大街88号乐天银泰百货八层",
      //   opts
      // ); // 创建信息窗口对象
      // lineLayer.addEventListener("click", function () {
      //   // map.openInfoWindow(infoWindow, point); //开启信息窗口
      //   alert(123123)
      // });
      view.addLayer(lineLayer);
      console.log("lineLayer", lineLayer.webglLayer.onClick);
      // lineLayer.webglLayer.onClick = function () {
      //   alert(123456);
      // };
    },
    playLine() {
      if (!this.playLineFlag) {
        let that = this;
        this.playLineFlag = true;
        alert("开始画线");
        this.map.addEventListener("click", function (e) {
          that.playLinePlist.push(e.latlng);
          that.clickAndPlayLine();
          // alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
        });
      } else {
        this.playLineFlag = false;
        this.map.addEventListener("click", null);
        alert("停止画线");
      }
    },
    // 点击画线
    clickAndPlayLine() {
      this.map.clearOverlays();
      this.copyplayLinePlist = [];
      let bmapGLPList = [];
      // this.copyplayLinePlist=[]
      this.playLinePlist.forEach((item) => {
        bmapGLPList.push(new BMapGL.Point(item.lng, item.lat));
        this.copyplayLinePlist.push([item.lng, item.lat]);
      });
      let polyline = new BMapGL.Polyline([...bmapGLPList], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      }); //创建折线
      this.map.addOverlay(polyline);
      console.log("-----****点位坐标****-----", this.copyplayLinePlist);
    },
    clearOneLine() {
      this.map.clearOverlays();
      this.playLinePlist.pop();
      console.log(this.playLinePlist);
      let bmapGLPList = [];
      this.playLinePlist.forEach((item) => {
        bmapGLPList.push(new BMapGL.Point(item.lng, item.lat));
      });
      let polyline = new BMapGL.Polyline([...bmapGLPList], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      }); //创建折线
      this.map.addOverlay(polyline);
    },
    clearAllLine() {
      this.map.clearOverlays();
      this.playLinePlist = [];
      this.copyplayLinePlist = [];
      let bmapGLPList = [];
      this.playLinePlist.forEach((item) => {
        bmapGLPList.push(new BMapGL.Point(item.lng, item.lat));
      });
      let polyline = new BMapGL.Polyline([...bmapGLPList], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      }); //创建折线
      this.map.addOverlay(polyline);
    },
  },
  mounted() {
    (this.map = new BMapGL.Map("container")), console.log(this.map);
    var point = new BMapGL.Point(114.673864, 35.183726);
    // 114.673864,35.183726
    this.map.centerAndZoom(point, 13);
    this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // this.addFillLayer();
    // this.getP2Line();
    this.getTable1();
    this.getTable2();
    this.getTable3();
    this.getTable4();
    this.getTable5();
    this.getTable6();
  },
};
</script>
  
<style lang="less" scoped>
.map {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  .maxWidth {
    width: 100%;
    height: 100%;
    .mapOut {
      position: relative;
      width: 49.5%;
      height: 100%;
      z-index: 999;
      #container {
        border-radius: 10px;
        height: 100%;
        width: 100%;
      }
      .infoBtn {
        position: absolute;
        width: 100px;
        height: 45px;
        background-color: rgba(16, 3, 3, 0.5);
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 99;
        font-size: 16px;
        color: white;
        line-height: 45px;
      }
      .fullScreen {
        position: absolute;
        width: 100px;
        height: 45px;
        background-color: rgba(16, 3, 3, 0.5);
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 99;
        font-size: 16px;
        color: white;
        line-height: 45px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .playLine {
        position: absolute;
        width: 100px;
        height: 45px;
        background-color: rgba(16, 3, 3, 0.5);
        top: 50px;
        right: 0;
        cursor: pointer;
        z-index: 99;
        font-size: 16px;
        color: white;
        line-height: 45px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .clearLine {
        position: absolute;
        width: 100px;
        height: 45px;
        background-color: rgba(16, 3, 3, 0.5);
        top: 100px;
        right: 0;
        cursor: pointer;
        z-index: 99;
        font-size: 16px;
        color: white;
        line-height: 45px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .infoList {
        width: 280px;
        height: 100%;
        background-color: rgba(16, 3, 3, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10px;
        z-index: 99;
        .close {
          margin-left: 15px;
          margin-top: 10px;
          cursor: pointer;
          ::v-deep [class*=" el-icon-"],
          [class^="el-icon-"] {
            color: white;
          }
          span {
            font-size: 24px;
            color: white;
          }
          i {
            margin-left: 135px;
          }
        }
        .el-tree {
          background-color: transparent;
          color: white;
        }
        ::v-deep .el-tree-node__content:hover {
          background-color: transparent;
          color: white;
        }
        ::v-deep .el-tree-node:focus > .el-tree-node__content {
          background-color: transparent;
          color: white;
        }
        ::v-deep .el-tree-node__content:hover {
          background-color: transparent;
          color: white;
        }
      }
    }
  }
  .gisMapRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 49.5%;
    height: 100%;
    border-radius: 10px;
    background-color: #0c323a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .topcards {
      height: 13.5%;
      width: 100%;
      // background-color: antiquewhite;
      display: flex;
      justify-content: space-between;
      .cardItem {
        width: 32%;
        height: 100%;
        border-radius: 10px;
        background-color: #176d7f;
        color: white;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        padding-left: 14px;
        box-sizing: border-box;
        .titlt {
          margin-top: 14px;
        }
        .num {
          font-size: 40px;
          margin-top: 14px;
        }
      }
    }
    .cards6 {
      height: 84%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      // align-items: stretch;
      .charts {
        width: 49%;
        height: 31%;
        border-radius: 10px;
        background-color: #002127;
      }
    }
  }
}
</style>